<template>
  <div>
    <el-form :model="searchForm"
             :inline="true">
      <el-form-item>
        <el-select v-model="searchForm.project"
                   placeholder="项目">
          <el-option v-for="item in projectList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.floor"
                   placeholder="楼层">
          <el-option v-for="item in floorList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.room"
                   placeholder="空间">
          <el-option v-for="item in roomList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <div>
        <el-form-item>
          <el-radio-group v-model="type" @input="changeRadioFun"
                          style="margin-bottom: 30px;">
            <el-radio-button v-for="item in btnList"
                             :key="item.id"
                             :label="item.id">{{item.name}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </div>
      <div>
        <el-form-item>
          <el-radio-group v-model="searchForm.dateType" @input="changeRadioTimeFun"
                          style="margin-bottom: 30px;">
            <el-radio-button :label="1">时刻查询</el-radio-button>
            <el-radio-button :label="2">时段查询</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-if="searchForm.dateType==1"
          @change="changeTimeFun"
                          v-model="searchForm.time"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择日期时间">
          </el-date-picker>
          <el-date-picker v-else
          @change="changeTimeRangeFun"
                          v-model="searchForm.timeRange"
                          type="datetimerange"
                          range-separator="至"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </div>
    </el-form>
    <div>
      <chart ref="chartRef" :type="searchForm.type" :searchForm="searchForm" />
    </div>
  </div>
</template>
<script>
import Chart from "./components/chart.vue"

import moment from 'moment';

export default {
  components: {
    Chart
  },
  data() {
    return {
      type:1,
      searchForm: {dateType:1},
      projectList: [{ name: "项目1", id: 1 }],
      floorList: [{ name: "一楼", id: 1 }],
      roomList: [{ name: "空间1", id: 1 }],
      btnList: [
        { name: "温度", id: 1 },
        { name: "湿度", id: 2 },
        { name: "pm2.5", id: 3 },
        { name: "co2", id: 4 },
        { name: "照度", id: 5 }]
    };
  },
  created() {
    this.searchForm.dateType = 1;
    this.searchForm.type = 1;
    
    this.searchForm.time = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
    this.searchForm.timeRange =[moment( moment().startOf('day')).format('YYYY-MM-DD HH:mm:ss'),moment(new Date()).format('YYYY-MM-DD HH:mm:ss')];
  
    this.searchForm.showTimeRange = this.searchForm.time;
  },
  methods:{
    changeRadioFun(e){
    this.type = e;
    this.searchForm.type = e;
  this.$refs.chartRef.setChart(this.$refs.chartRef.chartData,this.searchForm);
    },
    changeTimeRangeFun(e){
      this.searchForm.showTimeRange = `${e[0]}-${e[1]}`;
  this.$refs.chartRef.setChart(this.$refs.chartRef.chartData,this.searchForm);
    },
    changeTimeFun(e){
      this.searchForm.showTimeRange = e;
    },
    changeRadioTimeFun(e){
      if(e==1){
      this.searchForm.showTimeRange =  this.searchForm.time;
      }else{
      this.searchForm.showTimeRange = `${this.searchForm.timeRange[0]}-${this.searchForm.timeRange[1]}`;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>